<template>
	<view class="likelist">
		<uni-nav-bar left-icon="left" :border="false"   :fixed="true" :statusBar="true" >
			<view class="nav_title flex_row_center_center">
				<view class="nav_tab">
					<text 
					 v-for="(item,index) in navList"
					 :key="index"
					 :class="[tabCurrentIndex ==item.state ? 'on' :'']"
					  @click="tabClick(index)">{{item.text}}</text>
				</view>
			</view>
		</uni-nav-bar>
		<scroll-view :scroll-y="true" class="live_list">
			<swiper
			  :current="tabCurrentIndex"
			  class="swiper-box2"
			  duration="300"
			  @change="changeTab"
			  
			>
			  <swiper-item
			    class="tab-content"
			    v-for="(tabItem, tabIndex) in navList"
			    :key="tabIndex"
			  >
			    <scroll-view
			      class="list-scroll-content"
			      scroll-y
			      @scrolltolower="loadData"
			    >
			      <view
			        v-if="
			          tabItem.loadingState != 'first_loading' &&
			          tabItem.list.length == 0
			        "
			        class="empty_part flex_column_start_center"
			      >
			        <text>'还没有数据哦～</text>
			      </view>
			      <template>
			        <view v-if="tabCurrentIndex==0" >
						<view class="likeslist" v-for="(item,index) in navList[0].list">
							<view class="flex_row_start_center likeslist_top">
								<image v-if="item.member" :src="item.member.memberAvatar"  mode="aspectFill" class="like_image"></image>
								<view class="like_top" v-if="item.member" >
									<view>{{item.member.memberNickName}}</view>
									<view>{{$changeTime(item.createTime)}}</view>
								</view>
							</view>
							<view class="likeslist_content">
								<view class="likeslist_article" >{{item.content}}</view>
								<image v-if="item.picture && item.picture.split(',').length <=2" :src="item.picture.split(',')[0]" mode="aspectFill" class="likeslist_image1"></image>
								<view class="likeslist_images" v-if="item.picture && item.picture.split(',').length>=3">
									<image v-for="(value,idx) in item.picture.split(',')" 
										   :key="idx"
										   v-if="idx <3"
										   :src="value" mode="aspectFill" class="likeslist_image2"></image>
								</view>
							</view>
						</view>
					</view>
					<view v-if="tabCurrentIndex==1">
						<view class="likeslist" v-for="(item,index) in navList[1].list">
							<view class="flex_row_start_center likeslist_top">
								<image v-if="item.member" :src="item.member.memberAvatar"  mode="aspectFill" class="like_image"></image>
								<view class="like_top" v-if="item.member" >
									<view>{{item.member.memberNickName}}</view>
									<view>{{$changeTime(item.createTime)}}</view>
								</view>
							</view>
							<view class="likeslist_content">
								<view class="likeslist_article" >{{item.content}}</view>
								<image v-if="item.picture && item.picture.split(',').length <=2" :src="item.picture.split(',')[0]" mode="aspectFill" class="likeslist_image1"></image>
								<view class="likeslist_images" v-if="item.picture && item.picture.split(',').length>=3">
									<image v-for="(value,idx) in item.picture.split(',')" 
										   :key="idx"
										   v-if="idx <3"
										   :src="value" mode="aspectFit" class="likeslist_image2"></image>
								</view>
							</view>
							<view class="list_comment" v-for="(value,idx) in item.commentList" :key="index">
								<view class="flex_row_between_end">
									<image v-if="item.member" :src="item.member.memberAvatar"  mode="aspectFill" class="like_image2"></image>
									<view style="color: #cccccc;">{{$changeTime(value.createTime)}}</view>
								</view>
								<view style="margin-top: 8rpx;">我的评论:{{value.content}}</view>
							</view>
						</view>
					</view>
			      </template>
			    
			    </scroll-view>
			  </swiper-item>
			</swiper>
		</scroll-view>
	
	</view>
</template>

<script>
	export default{
		data(){
			return{
			    tabCurrentIndex:0,
				value:'人生本就是虚无，从无到有，再从有到无，可是我还是希望能好好书写自己的剧本，我知道这些情绪都不是真的，但起码也亲身经历过体验过',
				navList: [{
						state: 0,
						text: '赞',
						loadingState: 'first_loading',
						list: [],
						current: 1, //分页
					},
					{
						state: 1,
						text: '评论帖子',
						loadingState: 'first_loading',
						list: [],
						current: 1, //分页
					},
					]
			}
		},
		onLoad(){
			this.lodata()
		},
		methods:{
			tabClick(e){
				this.tabCurrentIndex=e
				// this.lodata('tabChange')
			},
			changeTab(e){
				console.log(e);
				 this.tabCurrentIndex=e.target.current
				 this.lodata('tabChange');
			},
			lodata(source){
				
				let index = this.tabCurrentIndex;
				let navItem = this.navList.filter(item => item.state == index)[0];
				let state = navItem.state;
				
				let behaviorType=index==0 ? 1 : 2 ;
				
				
				if (source === 'tabChange' && navItem.loadingState !== 'first_loading') {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingState === 'loading') {
					//防止重复加载
					return;
				}
				
				if (navItem.loadingState == 'no_more_data') {
					//已经没有数据，无需再请求
					return;
				}
				
				let param = {};
				param.url = 'v3/behavior/front/history/list';
				param.data = {};
				param.data.behaviorType = behaviorType;
				param.data.pageSize = 10;
				param.data.current = 1;
				navItem.loadingState = navItem.loadingState == 'first_loading' ? navItem.loadingState : 'loading';
				param.data.state = navItem.state;
				
				this.$request(param).then(res => {
					console.log('resss',res);
					if (res.state == 200) {
						navItem.list = navItem.list.concat(res.data.list);
						let hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (hasMore) {
							navItem.current++;
							navItem.loadingState = 'allow_loading_more';
						} else {
							navItem.loadingState = 'no_more_data';
						}
					} else {
						this.$modal.msg(res.msg);
					}
					
				}).catch((e) => {
					//异常处理
				})
			},
			
		}
	}
</script>

<style>
	page{
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	
	.nav_title{
		width: 100%;
		// background-color: red;
	}
	.nav_tab{
		background-color: #fff;
		border: 2rpx solid #f3f3f3;
		border-radius: 30rpx;
		width: 300rpx;
		height: 55rpx;
		line-height: 55rpx;
	    box-shadow: #f3f3f3 0px 0px 10rpx;
		& text{
			width: 50%;
			height: 100%;
			text-align: center;
			display: inline-block;
		}
		
	}
	.on{
		background-color: #60cfeb;
		color: #fff;
		border-radius: 30rpx;
	}
	
	.live_list {
		
		width: 750rpx;
		/* #ifdef H5 */
		height: calc(100vh );
		/* #endif */
		/* #ifdef MP || APP-PLUS */
		height: calc(100vh -88rpx);
		/* #endif */
		position: fixed;
		top: 176rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
		padding-top: 0rpx;
	}
	.swiper-box2 {
	  height: 100%;
	}
	.list-scroll-content {
	  height: 100%;
	  background-color: #f9f9f9;
	}
	
	.likeslist{
		padding: 10rpx 10rpx 20rpx 10rpx;
		margin-bottom: 14rpx;
		background-color: #fff;
	}
	
	
	.likeslist_top{
		padding-left: 15rpx;
	}
	
	.like_image{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}
		
	.like_top{
		& view:first-child{
			font-size: 26rpx;
			margin-bottom:4rpx;
		}
		& view:last-child{
			font-size: 20rpx;
			color: #c8c8c8;
		}
	}
	
	.likeslist_content{
		margin-top: 32rpx;
	}
	.likeslist_image1{
		width: 720rpx;
		height: 280rpx;
		border-radius: 30rpx;
	}
	
	.likeslist_images{
		display: flex;
	}
	.likeslist_image2{
		width: 32%;
		height: 280rpx;
		margin-right: 2%;
		border-radius: 30rpx;
		&:nth-last-child(1){
			margin-right: 0;
		}
	}
	.likeslist_article{
		margin-bottom: 14rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
		text-overflow: ellipsis; // 溢出用省略号显示
		overflow: hidden; // 超出的文本隐藏
		display: -webkit-box; // 作为弹性伸缩盒子模型显示
		-webkit-line-clamp: 3; // 显示的行
		-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
	}
	
	.empty_part{
		margin-top: 150rpx;
	}
	.like_image2{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}
	.list_comment{
		padding: 10rpx 32rpx;
	}
</style>